﻿@model Xms.Web.Customize.Models.SolutionComponentDialogModel
@{
    Layout = null;
}
<!-- （Modal） -->

<div class="modal fade" id="solutionComponentModal" tabindex="-1" role="dialog"
     aria-labelledby="solutionComponentModalLabel" aria-hidden="true">

    <link href="~/content/js/jquery-ui-1.10.3/themes/base/jquery.ui.all.css?v=@app.PlatformSettings.VersionNumber" rel="stylesheet">
    <link href="~/content/js/grid/pqgrid.dev.css?v=@app.PlatformSettings.VersionNumber" rel="stylesheet">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="solutionComponentModalLabel">
                    <span class="glyphicon glyphicon-th"></span> 组件
                </h4>
            </div>
            <div class="modal-body">
                <div class="dialog-datagrid-view" id="datagriddialogview"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove"></span> 关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="SolutionComponentModel.dialog_return()">
                    <span class="glyphicon glyphicon-ok"></span> 确定
                </button>
            </div>
            <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.button.js?v=@app.PlatformSettings.VersionNumber"></script>
            <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.mouse.js?v=@app.PlatformSettings.VersionNumber"></script>
            <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.autocomplete.js?v=@app.PlatformSettings.VersionNumber"></script>
            <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.draggable.js?v=@app.PlatformSettings.VersionNumber"></script>
            <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.resizable.js?v=@app.PlatformSettings.VersionNumber"></script>
            <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.tooltip.js?v=@app.PlatformSettings.VersionNumber"></script>
            <script src="/content/js/grid/pqgrid.dev.js?v=@app.PlatformSettings.VersionNumber"></script>
            <script src="/content/js/grid/localize/pq-localize-zh.js?v=@app.PlatformSettings.VersionNumber"></script>
            <script src="/content/js/cdatagrid.js?v=@app.PlatformSettings.VersionNumber"></script>

            <script src="/content/js/jquery.bootpag.min.js?v=@app.PlatformSettings.VersionNumber"></script>
            <script src="/content/js/jquery.form.js?v=@app.PlatformSettings.VersionNumber"></script>
            <script>
                        var SolutionComponentModel = {
                            dialogid: '#solutionComponentModal',
                            dialog: $('#solutionComponentModal'),
                            datatable: $("#solutionComponentModal .datatableload"),
                            gridviewid: "#solutionComponentModal #gridview",
                            gridview: $("#solutionComponentModal #gridview"),
                            searchform: $('#solutionComponentModal #searchForm'),
                            pagesection: $('#page-selection-Dialog'),
                            pageUrl : '@app.Url',
                            callback : @Html.Raw(Model.CallBack),
                            inputid : '@Html.Raw(Model.InputId)',
                            solutionid: '@Html.Raw(Model.SolutionId)',
                            serviceuri: '@Html.Raw(Model.ComponentDescriptor.ComponentsEndpoint)',
                            ajaxgrid_reset : function () {
                                SolutionComponentModel.pag_init();
                                Xms.Web.DataTable($("#solutionComponentModal .datatableload"));
                            },
                            pag_init: function () {
                                var page_section = $('#page-selection-Dialog');
                                page_section.bootpag({
                                    total: page_section.attr('data-total')
                                    , maxVisible: 5
                                    , page: page_section.attr('data-page')
                                    , leaps: false
                                    , prev: '&lsaquo;'
                                    , next: '&rsaquo;'
                                    , firstLastUse: true
                                    , first: '&laquo;'
                                    , last: '&raquo;'
                                }).on("page", function (event, /* page number here */ num) {
                                    event.preventDefault();
                                    var url = $.setUrlParam(SolutionComponentModel.pageUrl, 'page', num);
                                    SolutionComponentModel.gridview.ajaxLoad(url, SolutionComponentModel.gridviewid, function (response) {
                                        SolutionComponentModel.ajaxgrid_reset();
                                    });
                                    return false;
                                });
                            },
                            dialog_return : function () {
                                var result = new Array();
                              
                                var $datagriddialogview = $('#datagriddialogview');
                                var $Grid = $datagriddialogview.cDatagrid('getGrid');
                                $datagriddialogview.find('.pq-grid-cont-inner:first').find("input[name=recordid]:checked").each(function (i, n) {
                                    var obj = new Object();
                                    obj.id = $(n).val();
                                    var data = $Grid.pqGrid('getRowData',{ rowIndxPage: i })
                                    
                                    obj.name = data.localizedname;
                                    result.push(obj);
                                });
                                var dialog = $(SolutionComponentModel.dialogid);
                                if (dialog.data().OpenDialogCallback) {
                                    dialog.data().OpenDialogCallback(result, SolutionComponentModel.inputid,SolutionComponentModel)
                                } else {
                                    SolutionComponentModel.callback && SolutionComponentModel.callback(result,SolutionComponentModel.inputid);
                                }

                                SolutionComponentModel.dialog.modal('hide');
                            }
                        };

                        $(function () {
                            SolutionComponentModel.ajaxgrid_reset();
                            SolutionComponentModel.searchform.ajaxSearch(SolutionComponentModel.gridviewid, SolutionComponentModel.ajaxgrid_reset);
                            SolutionComponentModel.datatable.ajaxTable();
                            SolutionComponentModel.dialog.modal({
                                backdrop: 'static'
                            });
                            SolutionComponentModel.dialog.on('hidden.bs.modal', function () {
                                Xms.Web.CloseDialog(SolutionComponentModel.dialogid);
                            });
                            $(SolutionComponentModel.dialogid + ' button[name=createBtn]').off('click').on('click', null, function (e) {
                                SolutionComponentModel.CreateRecord();
                            });
                            //Xms.Ajax.GetJson(SolutionComponentModel.serviceuri + '?page=1&pagesize=10&insolution=false&solutionid=' + SolutionComponentModel.solutionid, null, function (response) {
                            //    console.log('components', response);
                            //});
                            //"{"currentpage":1,"items":[{"objectid":"4cdb41ab-cc63-4b86-b611-9b8b457bb6cb","name":"Customer.js","localizedname":"Customer.js","componenttypename":"WebResource"}],"itemsperpage":10,"totalitems":1,"totalpages":1}"

                            var columnConfigs = [{ "dataIndx": "name", "title": "名称", "dataType": "string", "width": 100 , "isrequired": true, "isloged": false, "iscustomfield": false, "iscustomizable": false, "issecured": false, "isprimaryfield": false,  "attributetypename": "string" },
                                { "dataIndx": "localizedname", "title": "显示名称", "dataType": "string", "width": 100 , "isrequired": true,  "isprimaryfield": false, "attributetypename": "string" },
                                { "dataIndx": "componenttypename", "title": "类型", "dataType": "string", "width": 100,  "isrequired": true, "isprimaryfield": false, "attributetypename": "string" },
                            {
                                title: "选择", editable: false, minWidth: 165, sortable: false, render: function (ui) {
                                    return '<a class="btn btn-link btn-xs rowclickok" href="javascript:;" ><span class="glyphicon glyphicon-ok"></span></a>';
                                }
                            }]

                            var datagridconfig = {
                                height:300,
                               //获取数据的方法
                                getDataUrl: function () {
                                    return ORG_SERVERURL+SolutionComponentModel.serviceuri + '?page=1&pagesize=10&insolution=false&solutionid=' + SolutionComponentModel.solutionid
                                },

                                filterColModel: function (opts) { opts.colModel = columnConfigs; return opts; },
                                rowDblClick: function (event, ui) {
                                    console.log($(event.target));
                                    console.log(ui);
                                    var $tr = ui.$tr;
                                    $tr.find('input[name="recordid"]').prop('checked', true);
                                    SolutionComponentModel.dialog_return();
                                },

                                columnFilter: function (items) {
                                    console.log(items)

                                    $.each(items, function (key, item) {
                                        item.editable = false;

                                    });
                                    //添加操作列
                                    items.unshift(
                                        {
                                            title: "", dataIndx: "recordid", maxWidth: 48, minWidth: 48, align: "center", resizable: false,
                                            type: 'checkBoxSelection', cls: 'ui-state-default', sortable: false, editable: false,
                                            render: function (ui) {
                                                console.log(ui)
                                                return '<input type="checkbox" value="' + ui.rowData.objectid+'" name="recordid" class="">'
                                            },
                                            cb: { all: true, header: true }
                                        });
                                    return items;
                                }
                            }
                            datagridconfig.height = 300;
                            //  console.log(itemtmpl);
                            setTimeout(function () {
                                $('.dialog-datagrid-view').xmsDataTable(datagridconfig);
                            },100)

                            $('.dialog-datagrid-view').off('click').on('click', '.rowclickok', function (e) {
                                var $tr = $(this).parents('tr:first');
                                $tr.find('input[name="recordid"]').prop('checked', true);
                                SolutionComponentModel.dialog_return();
                            });
                        });
            </script>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->